<template>
	<h2>teleport 瞬移</h2>
	<h4>teleport：将被包裹的 dom 放入指定的容器中（body、id、class）</h4>
	<h4>容器必须要在 teleport 标签之前</h4>

	<button @click="inRed = !inRed">瞬移</button>

	<div>
		<div class="box" id="red">
			<h4>red</h4>
		</div>
	
		<div class="box" id="blue" style="border-color: blue;">
			<h4>blue</h4>
		</div>
	</div>
	<hr>
	
	<teleport :to="inRed ? '#red' : '#blue'">
		<p>1111111</p>
		<p>1111111</p>
		<p>1111111</p>
	</teleport>
	
	<hr>
	<hr>
	<hr>
	
	<suspense>
		<template #default>
			<div>
				<h2>suspense：加载组件时防止空白</h2>
				<child></child>
			</div>
		</template>
		
		<template #fallback>
			<h2>loading.....</h2>
		</template>
	</suspense>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent, reactive, toRefs } from 'vue';
// vue3.0 动态引入组件
// const child = defineAsyncComponent(()=>import('./child.vue'))

// 静态引入组件
import child from './child.vue'
export default defineComponent({
	components: {
		child,
	},
	setup(){
		let data = toRefs(reactive({
			inRed: true
		}))
		return{
			...data
		}
	}
});
</script>

<style lang="scss" scoped>
.box{
	border: 1px solid red;
	padding: 10px;
	display: inline-block;
	width: 200px;
}
	
</style>
